<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百炼 API 测试页面</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>百炼 API 测试页面</h1>
            <div id="status-container">
                <span>API 状态：</span>
                <span id="api-status">检查中...</span>
                <a href="/config" class="config-link">配置管理</a>
            </div>
        </header>

        <div class="tabs">
            <button class="tab-btn active" data-tab="completion">文本生成</button>
            <button class="tab-btn" data-tab="chat">对话生成</button>
            <button class="tab-btn" data-tab="image">图片分析</button>
        </div>

        <div class="tab-content">
            <!-- 文本生成面板 -->
            <div class="tab-pane active" id="completion-panel">
                <h2>文本生成</h2>
                <div class="form-group">
                    <label for="completion-prompt">提示文本：</label>
                    <textarea id="completion-prompt" rows="5" placeholder="请输入提示文本，例如：从前有座山"></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="completion-max-tokens">最大标记数：</label>
                        <input type="number" id="completion-max-tokens" value="1024" min="1" max="4096">
                    </div>
                    <div class="form-group">
                        <label for="completion-temperature">温度：</label>
                        <input type="range" id="completion-temperature" min="0" max="1" step="0.1" value="0.7">
                        <span id="completion-temperature-value">0.7</span>
                    </div>
                </div>
                <div class="form-actions">
                    <button id="completion-submit" class="btn-primary">生成文本</button>
                    <button id="completion-clear" class="btn-secondary">清空</button>
                </div>
                <div class="result-container">
                    <h3>生成结果：</h3>
                    <div id="completion-result" class="result">
                        <p class="placeholder">生成的文本将显示在这里...</p>
                    </div>
                </div>
            </div>

            <!-- 对话生成面板 -->
            <div class="tab-pane" id="chat-panel">
                <h2>对话生成</h2>
                <div class="chat-container" id="chat-messages">
                    <!-- 对话消息将在这里显示 -->
                </div>
                <div class="form-row chat-input">
                    <textarea id="chat-input" placeholder="输入你的消息..." rows="2"></textarea>
                    <button id="chat-submit" class="btn-primary">发送</button>
                </div>
                <div class="form-row settings">
                    <div class="form-group">
                        <label for="chat-max-tokens">最大标记数：</label>
                        <input type="number" id="chat-max-tokens" value="1024" min="1" max="4096">
                    </div>
                    <div class="form-group">
                        <label for="chat-temperature">温度：</label>
                        <input type="range" id="chat-temperature" min="0" max="1" step="0.1" value="0.7">
                        <span id="chat-temperature-value">0.7</span>
                    </div>
                    <button id="chat-clear" class="btn-secondary">清空对话</button>
                </div>
            </div>

            <!-- 图片分析面板 -->
            <div class="tab-pane" id="image-panel">
                <h2>图片分析</h2>
                <div class="form-group">
                    <label for="image-upload">选择图片：</label>
                    <div class="image-upload-container">
                        <input type="file" id="image-upload" accept="image/*">
                        <div id="image-preview-container" class="hidden">
                            <img id="image-preview" src="" alt="图片预览">
                            <button id="image-remove" class="btn-icon">×</button>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="image-prompt">提示文本：</label>
                    <textarea id="image-prompt" rows="3" placeholder="请输入关于图片的问题，例如：请描述这张图片中的内容"></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="image-max-tokens">最大标记数：</label>
                        <input type="number" id="image-max-tokens" value="1024" min="1" max="4096">
                    </div>
                    <div class="form-group">
                        <label for="image-temperature">温度：</label>
                        <input type="range" id="image-temperature" min="0" max="1" step="0.1" value="0.7">
                        <span id="image-temperature-value">0.7</span>
                    </div>
                </div>
                <div class="form-actions">
                    <button id="image-submit" class="btn-primary">分析图片</button>
                    <button id="image-clear" class="btn-secondary">清空</button>
                </div>
                <div class="result-container">
                    <h3>分析结果：</h3>
                    <div id="image-result" class="result">
                        <p class="placeholder">图片分析结果将显示在这里...</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="api-info">
            <h3>API 请求信息</h3>
            <div class="api-request-info">
                <div class="request-header">
                    <span>请求：</span>
                    <span id="request-method">-</span>
                    <span id="request-url">-</span>
                </div>
                <div class="request-body">
                    <pre id="request-body-content">-</pre>
                </div>
            </div>
            <div class="api-response-info">
                <div class="response-header">
                    <span>响应：</span>
                    <span id="response-status">-</span>
                </div>
                <div class="response-body">
                    <pre id="response-body-content">-</pre>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p>百炼 API 服务器 &copy; 2023</p>
    </footer>

    <!-- API 状态检查脚本 -->
    <script src="js/api-status.js"></script>

    <!-- 百炼客户端 JavaScript -->
    <script src="js/bailian-client.js"></script>

    <!-- 主要脚本 -->
    <script src="js/script.js"></script>
</body>
</html>
